<template>
    <div class="email-unsubscribe">
        <figure>
            <img src="@/assets/images/logo.png" alt="">
        </figure>
        <div class="email-unsubscribe-content">
            <figure>
                <img src="https://img.podpartner.com/static/images-20230202/email-unsubscribe.png" alt="">
            </figure>
            <p>You are not missing out on any of our new features or offers. Are you sure you no longer want to receive any email newsletters from PODpartner?</p>
            <button type="primary" @click="toUnsubscribe">Unsubscribe</button>
        </div>
        <Login />
    </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
    name: "emailUnsubscribe",
    layout: "layout-empty",
    data () {
        return {
            option: null
        };
    },
    computed: {
        ...mapGetters({
            isLogin: "getIsLogin",
        }),
    },
    methods: {
        toUnsubscribe () {
            if (this.isLogin) {
                this.$router.push(`/settings/account?option=${this.option}`)
            } else {
                this.$emit('global:userLogin', () => {
                    this.$router.push(`/settings/account?option=${this.option}`)
                })
            }
        }
    },
    created () {
        if (process.client) {
            let query = this.$route.query;
            let option = query.option || null;
            if (option) {
                this.option = option
            } else {
                this.$router.push(`/`)
            }
        }
    },
    mounted () {

    },
};
</script>
<style lang="scss" scoped>
body {
    background-color: rgba(244, 244, 244, 1);
}
.email-unsubscribe {
    width: 100%;
    min-height: 100vh;
    background-color: rgba(244, 244, 244, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    & > figure {
        margin: 26px 0 98px 80px;
        align-self: flex-start;
        width: 152px;
        height: 26px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .email-unsubscribe-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 780px;
        background: #ffffff;
        border-radius: 32px;
        border: 1px solid #ebebeb;
        padding: 96px 0 106px;
        & > figure {
            width: 94px;
            height: 94px;
            margin: 0 0 12px;
            img {
                width: 100%;
                height: 100%;
            }
        }
        & > p {
            margin: 0 60px;
            font-size: 20px;
            font-weight: 400;
            color: #000000;
            line-height: 32px;
            text-align: center;
        }
        & > button {
            margin-top: 26px;
            padding: 12px 70px;
        }
    }
}
</style>
